<div
  class="image-cropper-container"
  [style.width.px]="containerWidth"
  [style.height.px]="containerHeight"
>
  <div class="image-preview" *ngIf="!imageUrl">
    <nz-upload
      [nzAccept]="'image/*'"
      [nzBeforeUpload]="handleFileSelect.bind(this)"
      [nzShowUploadList]="false"
      [nzMultiple]="false"
    >
      <button nz-button>
        <span nz-icon nzType="upload"></span>
        选择图片
      </button>
    </nz-upload>
    <p class="hint-text">支持JPG、PNG格式</p>
  </div>

  <div class="crop-container" *ngIf="imageUrl">
    <img
      #imageElement
      [src]="imageUrl"
      [style.transform]="
        'translate(' +
        imagePosition.x +
        'px, ' +
        imagePosition.y +
        'px) scale(' +
        imageScale +
        ') rotate(' +
        imageRotation +
        'deg)'
      "
      (mousedown)="startDrag($event)"
      class="crop-image"
      alt="待裁剪图片"
    />

    <div
      #cropArea
      class="crop-area"
      [style.width.px]="cropWidth"
      [style.height.px]="cropHeight"
      [style.left.px]="(containerWidth - cropWidth) / 2"
      [style.top.px]="(containerHeight - cropHeight) / 2"
    ></div>

    <div class="crop-controls">
      <div class="core-controls">
        <div class="zoom-controls" *ngIf="controls.zoom">
          <button
            nz-button
            nzType="text"
            nz-tooltip
            nzTooltipTitle="缩小"
            (click)="adjustScale(-0.1)"
          >
            <span nz-icon nzType="zoom-out"></span>
          </button>
          <nz-slider
            [nzMin]="0.1"
            [nzMax]="3"
            [nzStep]="0.01"
            [(ngModel)]="imageScale"
            [nzTooltipVisible]="'never'"
            style="width: 100px; margin: 0 10px"
          ></nz-slider>
          <button
            nz-button
            nzType="text"
            nz-tooltip
            nzTooltipTitle="放大"
            (click)="adjustScale(0.1)"
          >
            <span nz-icon nzType="zoom-in"></span>
          </button>
        </div>

        <div class="rotation-controls" *ngIf="controls.rotate">
          <button
            nz-button
            nzType="text"
            nz-tooltip
            nzTooltipTitle="向左旋转"
            (click)="imageRotation = (imageRotation - 90) % 360"
          >
            <span nz-icon nzType="rotate-left"></span>
          </button>
          <button
            nz-button
            nzType="text"
            nz-tooltip
            nzTooltipTitle="向右旋转"
            (click)="imageRotation = (imageRotation + 90) % 360"
          >
            <span nz-icon nzType="rotate-right"></span>
          </button>
        </div>
      </div>

      <div class="action-controls">
        <button nz-button nzType="default" (click)="resetImage()">重置</button>
        <nz-upload
          [nzAccept]="'image/*'"
          [nzBeforeUpload]="handleFileSelect.bind(this)"
          [nzShowUploadList]="false"
          [nzMultiple]="false"
        >
          <button nz-button nzType="default">重选</button>
        </nz-upload>
        <button nz-button nzType="primary" (click)="cropImage()">
          确认裁剪
        </button>
      </div>
    </div>
  </div>

  <canvas #canvas style="display: none"></canvas>
</div>

<div class="operation-hints" *ngIf="imageUrl">
  <h4>操作提示:</h4>
  <ul>
    <li>鼠标拖动: 移动图片</li>
    <li *ngIf="controls.zoom">鼠标滚轮: 缩放图片</li>
    <li *ngIf="controls.rotate">方向键 ← →: 旋转图片</li>
    <li *ngIf="controls.zoom">方向键 ↑ ↓: 缩放图片</li>
    <li>WASD键: 移动图片</li>
  </ul>
</div>
